<template>
  <div id="associatedItems">
    <el-dialog
      :visible.sync="dialogData.isShow"
      width="400px"
      @close="closeAddDialog"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <!-- 顶部搜索框部分 -->
          <div class="search-box">
            <el-form ref="ruleForm" :inline="true" :model="projectNameIds">
              <!-- 输入搜索部分 -->
              <el-form-item prop="school">
                <el-input
                  v-model="projectNameIds.name"
                  placeholder="请输入项目标签名称"
                  maxlength="10"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item class="s-btn">
                <el-button
                  :v-loading="loading"
                  type="success"
                  @click="add('ruleForm')"
                >
                  添加
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 表格部分 -->
        </el-col>
      </el-row>
      <h1>项目标签列表</h1>
      <el-row :gutter="12">
        <el-checkbox-group
          ref="checkForm"
          :v-loading="loading"
          class="checkbox"
          v-model="showCheckProjects"
          size="medium"
          style="height:300px;overflow-y:auto"
        >
          <el-checkbox
            class="checkbox_checkbtn ellipsis"
            v-for="item in checkProjects"
            broder
            :label="item"
            :key="item.id"
            border
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="closeAddDialog"
          >取 消</el-button
        >
        <el-button type="success" @click="exportConfirm()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { filtersProjects } from '@utils/filters'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getColleges } from '@/api/couponsIntegral/coupons' // 接口
import { addProject, getProject } from '@/api/couponsIntegral/project' // 接口
export default {
  name: 'associatedItems',
  msg: '优惠券关联项目出弹窗',
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      ruleForm: {},
      selectedColor: false, //卡片选中颜色
      itemLabelInx: 0,
      projectNameIds: {
        name: '' //标签名称
      },
      checkProjects: [{ id: '', name: '' }], // 新增标签
      showCheckProjects: [], // 已选标签
      multipleSelection: [],
      selectionId: [],
      maxSize: 200
    }
  },
  mounted() {
    this.dataShowSelect()
    //如果新增标签数据是空的就进行刷新项目标签列表
    this.checkProjects.length == 0 && this.searchList()
  },
  methods: {
    /* 获取选中标签列表 */
    searchList() {
      this.loading = true
      getProject(
        (response) => {
          this.loading = false
          this.checkProjects = response
        },
        (response) => {
          this.loading = false
          this.checkProjects = response
        }
      )
    },

    // 新增
    async add() {
      this.loading = true
      //判断是否有输入的相同标签
      const falg = filtersProjects(this.projectNameIds.name,  this.checkProjects)
      // 如果输入的标签名不为空并且项目标签名不重复就进行赋值
      if (this.projectNameIds.name != ''&&this.projectNameIds.name.indexOf(' ')==-1&& falg) {
        this.checkProjects.push({
          // id: (this.itemLabelInx += 1),
          name: this.projectNameIds.name
        })
        //将新增的项目标签进行再次复制,在接口传值时封装成对象
        var names = this.projectNameIds.name
        await addProject(
          { name: names },
          (response) => {
            this.loading = false
          },
          (response) => {
            this.loading = false
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      } else {
        this.loading = false
        this.$message('您输入的标签为空或重复，请重新输入')
      }
    },
    // 弹窗关闭事件
    closeAddDialog() {
      this.loading = false
      this.dialogData.isShow = false
    },
    dataShowSelect() {
      // 回填已经存在的新增项目标签
      this.checkProjects = [...this.dialogData.showCheckData]
      this.showCheckProjects = [...this.dialogData.projectNameIds]
    },
    /*将数据传回父组件 */
    exportConfirm() {
      //判断选中的项目标签数量，如果没有就提示至少选择一个项目标签
      if (this.showCheckProjects.length > 0) {
        this.$emit(
          'setAssociatedItems',
          this.showCheckProjects,
          this.checkProjects
        )
        this.closeAddDialog()
      } else {
        this.$message.error('请至少选择一个项目标签')
      }
    }
  }
}
</script>

<style lang="less">
#associatedItems {
  .clear-btn {
    float: right;
  }
  .search-box {
    padding-left: 0 !important;
    overflow: hidden;
  }
  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
    margin-left: 0px;
    margin-top: 10px;
  }
  form.el-form.el-form--inline {
    display: flex;
    width: 100%;
  }
  .el-input {
    width: 200ppx;
  }
  .el-checkbox-button__inner:hover {
    color: #fff;
  }
  .ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
  }
  .checkbox {
    &_checkbox {
      margin: 20px 20px;
      padding: 20px 20px;
    }
  }
}
</style>
